<template>
	<view>
		<view class="freeBox" v-if="activeObj">
			<image class="freeBg" :src="activeObj.image" mode=""></image>
			<image class="receiveActive" v-if="!showSecond" @click="receiveFree" src="../../static/img/active/button-active.png" mode=""></image>
			<!-- <image class="receiveExpire" v-if="!isExpire && !showSecond" src="../../static/img/active/button.png" mode=""></image> -->
			<div class="daojishi" v-if="showSecond">
				<div class="count-down">
					观看视频领取优惠卷({{second}})<span>s</span>
				</div>
			</div>
			<video autoplay="true" class="shipin" :src="activeObj.fdvideo" controls></video>
		</view>
		<view class="noData" v-else>
			<image src="../../static/img/common/nodata.png" class="image"></image>
			<view class="text">该场馆还没有开启免单活动～</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="receiveSuccess">
				<image src="../../static/img/active/free.png" class="free"></image>
				<image src="../../static/img/active/receive.png" @click="closeReceive" class="receive"></image>
				<image src="../../static/img/active/close.png" @click="closeReceive" class="close"></image>
			</view>
		</uni-popup>
		<!-- 未登录提示框 -->
		<view class="mask" v-if="!isLogin">
			<view class="login">
				<view class="bgc">
					<image class="bgc_img" src="/static/img/index/login-bgc.png" mode="widthFix"></image>
					<image class="img_login" src="/static/img/index/login.png" mode="widthFix"></image>
				</view>
				<view class="btn_login">
					<view class="tit">您还没有登录</view>
					<view class="tips">登录即刻开启快乐生活</view>
		
					<!-- #ifdef MP-WEIXIN -->
					<button @click="bindgetuserinfo" class="btn1">立即登录</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button @click="bindAuthorizeinfo" @error="onAuthError">立即登录</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { wxLogin, apilyLogin } from "@/api/api.js"
	import { activityReceive, getActivityList } from "@/api/active.js"
	export default {
		data() {
			return {
				venues_id: null,
				isExpire: false,
				activity_id: null, //当生效活动
				activeList: [], //活动列表
				activeObj: {},
				second: 15,
				showSecond: true,
				isLogin: false,
			}
		},
		computed: {
			activeImage() {
				if (this.activeList.length == 0) {
					return false
				}
				let index = 0;
				for (var i = 0; i < this.activeList.length; i++) {
					if (this.activeList[i].id == this.discount_certificate_id) {
						index = i
					}
				}
				return index ? this.activeList[index].image : this.activeList[0].image
			},
		},
		onLoad(options) {
			if (options && options.venues_id) {
				this.venues_id = options.venues_id
			}
			this.countDown();
		},
		onShow() {
			let token = uni.getStorageSync('token');
			if (token) {
				this.isLogin = true;
				this.getActivityList();
			}
		},
		methods: {
			//获取免费单活动列表
			getActivityList() {
				getActivityList({
					venues_id: this.venues_id
				}).then(res => {
					this.activeObj = res.data
					console.log(this.activeObj, 'activeObj')
					this.getActiveInfo()
				})
			},
			// 倒计时
			countDown () {
				const setInnt = setInterval(() => {
					if (parseInt(this.second) > 1) {
						this.second = this.second - 1;
					} else {
						clearInterval(setInnt);
						this.second = 15;
						this.showSecond = false;
					}
				}, 1000);
			},
			// 微信登录授权
			bindgetuserinfo() {
				uni.getUserProfile({
					desc: '正在获取',
					success: info => {
						uni.login({
							success: res => {
								let data = {
									rawData: info.rawData,
									code: res.code,
									iv: info.iv
								};
								wxLogin(data).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '授权成功'
										});
										this.isLogin = true;
										uni.setStorageSync('user', res.data.userInfo);
										uni.setStorageSync('token', res.data.userInfo.token);
										this.getActivityList();
									}
								});
							}
						});
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			
			// 支付宝登录授权
			bindAuthorizeinfo() {
				my.getAuthCode({
					scopes: ['auth_user'],
					success: res => {
						apilyLogin({
							authCode: res.authCode
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '授权成功'
								});
								this.isLogin = true;
								uni.setStorageSync('user', res.data.userinfo);
								uni.setStorageSync('token', res.data.userinfo.token);
								this.getActivityList();
							}
						});
					}
				});
			},
			isCurrentTimeInRange(data) {
				// 获取当前时间  
				const now = new Date();
				const currentHour = now.getHours();
				const currentMinute = now.getMinutes();

				// 遍历数组中的每一项数据  
				// for (const item of data) {
				// 	// 将starttime和endtime字符串转换为小时和分钟  
				// 	const [startHour, startMinute] = item.starttime.split(':').map(Number);
				// 	const [endHour, endMinute] = item.endtime.split(':').map(Number);
				// 	// 检查当前时间是否在starttime和endtime之间  
				// 	if (currentHour === startHour && currentMinute >= startMinute ||
				// 		currentHour > startHour && currentHour < endHour ||
				// 		currentHour === endHour && currentMinute <= endMinute) {
				// 		this.activity_id = item.id
				// 		if (item.receive >= item.quantity) {
				// 			return false
				// 		} else {
				// 			return true;
				// 		}
				// 	}
				// }
				const [startHour, startMinute] = this.activeObj.starttime.split(':').map(Number);
				const [endHour, endMinute] = this.activeObj.endtime.split(':').map(Number);
				// 检查当前时间是否在starttime和endtime之间
				if (currentHour === startHour && currentMinute >= startMinute ||
					currentHour > startHour && currentHour < endHour ||
					currentHour === endHour && currentMinute <= endMinute) {
					this.activity_id = this.activeObj.id
					if (item.frequency >= item.quantity) {
						return false
					} else {
						return true;
					}
				}
				// 没有找到匹配的时间范围  
				return false;
			},
			//获取活动信息
			getActiveInfo() {
				if (this.activeList.length == 0) {
					// uni.showToast({
					// 	icon: "none",
					// 	title: "活动未开始，敬请期待!"
					// })
					// setTimeout(() => {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	})
					// }, 1000)
					return false
				}
				this.isExpire = this.isCurrentTimeInRange(this.activeObj)
				if (!this.isExpire) {
					return uni.showToast({
						icon: 'none',
						title: '这一场的免单活动已结束'
					})
				}
			},
			//领取免单券
			receiveFree() {
				activityReceive({
					id: this.activity_id || this.activeObj.id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: "success",
							title: "领取成功！"
						})
						this.$refs.popup.open('center')
						// this.getActivityList()
						setTimeout(() => {
							this.$refs.popup.close()
						}, 2000)
					}
					// } else {
					// 	return uni.showToast({
					// 		icon: 'none',
					// 		title: '抱歉您未抽中免单券'
					// 	})
					// }
				})
			},
			closeReceive() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noData {
		padding-top: 390rpx;
		margin: 0 auto;
		text-align: center;
		position: relative;
		z-index: 100;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.freeBox {
		width: 100vw;
		height: 100vh;
		position: relative;

		.freeBg {
			position: absolute;
			width: 100%;
			height: 100vh;
		}

		.receiveActive,
		.receiveExpire {
			width: 237px;
			position: absolute;
			height: 77px;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}
		.shipin{
			width: 90%;
			position: absolute;
			left: 5%;
			bottom: 30%;
		}
		.daojishi{
			width: 237px;
			height: 77px;
			line-height: 70px;
			text-align: center;
			color: #fff;
			background: url('/static/img/active/button1.png') no-repeat center;
			background-size: 100% 100%;
			position: absolute;
			left: 50%;
			bottom: 20rpx;
			transform: translateX(-50%);
			z-index: 1;
		}
	}

	.receiveSuccess {
		display: flex;
		flex-direction: column;
		align-items: center;

		.free {
			width: 492rpx;
			height: 444rpx;
		}

		.receive {
			margin-top: 62rpx;
			width: 292rpx;
			height: 120rpx;
		}

		.close {
			margin-top: 68rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	
		.login {
			width: 600upx;
			height: 625upx;
			background: #ffffff;
			border-radius: 20upx;
	
			.bgc {
				width: 100%;
				height: 285upx;
				position: relative;
	
				.bgc_img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
	
				.img_login {
					width: 116upx;
					height: 134upx;
					position: absolute;
					top: calc(50% - 67upx);
					left: calc(50% - 58upx);
				}
			}
	
			.btn_login {
				width: 90%;
				margin: 30upx auto 0;
				text-align: center;
	
				.tit {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 34upx;
					margin-top: 50upx;
				}
	
				.tips {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 26upx;
					margin: 30upx 0;
				}
	
				button {
					width: 100%;
					height: 80upx;
					background: #3199ff;
					box-shadow: 0upx 8upx 12upx 6upx rgba(0, 101, 196, 0.16);
					border-radius: 40upx;
					color: #ffffff;
					font-size: 32upx;
					line-height: 80upx;
				}
	
				.exit {
					margin: 30upx 0;
				}
			}
		}
	}
</style>